<template>
  <div class="m-crumbs flex">
    <div class="layout-1" @click="toggleClick" :style="{
        'left': isActive?'201px':'65px'
    }">
      <svg-icon icon-class="menu" class="hamburger" :class="{'active':isActive}"></svg-icon>
    </div>
    <el-breadcrumb class="layout-2" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path+index" v-if='item.meta.title'>
          <span v-if='item.redirect==="noredirect"||index==levelList.length-1'
                class="no-redirect">{{item.meta.title}}</span>
        <router-link :to="item.redirect||item.path" v-else>{{item.meta.title}}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
  export default {
    name: 'TheCrumbs',
    data () {
      return {
        levelList: [],
        firstPageName: '',
      }
    },
    watch: {
      '$route'() {
        this.getBreadcrumb()
      }
    },
    created(){
      this.getBreadcrumb();
    },
    computed: {
      isActive(){
        return !this.$store.state.app.slideOpen
      },
    },
    methods: {
      getBreadcrumb() {
        let matched = this.$route.matched.filter(item => (item.name && (item.meta && item.meta.title)));
        /*
         * 给详情页面增加一个 meta：{details:''} details的值为list页面的名字 如果匹配上，就在上一次记录push 详情页面
         * 我的桌面四个tab要记录在面包屑导航
         *
         * */
        if(this.$route.name == 'Index') {
          let _title = '';
          if(this.$route.query.page == 'notice') {
            _title='我的消息'
          } else if(this.$route.query.page == 'leads') {
            _title='我的LEADS'
          } else if(this.$route.query.page == 'account') {
            _title='我的真实账号'
          } else {
            _title='我的跟进项'
          }
          matched[0]= {
            path:this.$route.fullPath,
            meta:{title:_title},
            name:'Index'
          }
        }
        let last = matched[matched.length - 1];
        // 当前所在的是详情页面
        if ((last.meta && last.meta.details) && this.levelList.length >=2) {
          if(this.levelList[this.levelList.length - 1].meta && this.levelList[this.levelList.length - 1].meta.details) {
            //最后一个是详情，直接return
            return;
          } else  {
//            if (this.levelList[this.levelList.length - 1].name=='Index' || last.meta.details == this.levelList[this.levelList.length - 1].name) {
            if (this.levelList[this.levelList.length - 1].name=='Index' || last.meta.details) {
              this.levelList.push(last);
              return;
            }
          }

        }
        this.levelList = matched;
        this.levelList = [{path: '/index/desktop', meta: {title: '我的桌面'}}].concat(matched);
      },
      toggleClick() {
        this.$store.dispatch('toggleSideBar')
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../scss/variables";

  .m-crumbs {
    /*   border-bottom: solid 1px $--border-color-base;*/
    padding: 9px 57px 9px 5px;
    font-size: $--font-size-base;
    color: $--color-text-regular;
  }

  .layout-1 {
    position: absolute;
    margin-top: -2px;
    border: solid 1px $--border-color-base;
    border-left: none;
    width: 22px;
    line-height: 20px;
    padding-right: 2px;
    text-align: center;
    border-radius: 0 4px 4px 0;
    &:after {
      content: '';
      width: 1px;
      height: 100%;
      background-color: #fff;
      position: absolute;
      left: -1px;
    }
    .hamburger {
      position: relative;
      top: 2px;
      display: inline-block;
      cursor: pointer;
      width: 16px;
      height: 16px;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      transition: .2s;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
    }
    .active {
      transform: rotate(0deg);
    }
  }

  .layout-2 {
    flex: 1;
    padding-left: 25px;
    line-height: 16px;
    a {
      color: $--color-text-regular;
      cursor: pointer;
      text-decoration: none;
      &.last {
        color: $--color-text-secondary;
      }
    }
  }
</style>
